<template>
    <div class="user-container">
        <div class="user-photo" v-for="item in datas" style="height: 300px;">
            <el-image style="border-radius: 10px;position: absolute;height: 200px;width: 320px;"
                :src="api.show + imageUrl(item.fileId)" @click="toPhoto(item.id)">
            </el-image>
            <div class="photo-info">
                <p>{{ item.name }}</p>

            </div>
            <div class="info-statistics">
                <p style="margin-right: 20px;">
                    <svg class="icon like" aria-hidden="true" @click="likeChange(photo.id)">
                        <use xlink:href="#icon-like"></use>
                    </svg>
                    &nbsp;
                    {{ item.likeCount }}
                </p>
                <p>
                    <svg class="icon like" aria-hidden="true" @click="likeChange(photo.id)">
                        <use xlink:href="#icon-watch"></use>
                    </svg>
                    &nbsp;
                    {{ item.watchCount }}
                </p>
            </div>
            <div class="photo-time">
                {{ item.createTime.substring(0, 10) }}
            </div>
            <div class="photo-button" v-if='isMy'>
                <el-button type="primary" size="small" :icon="Edit" circle @click="editShow(item)" />
                <el-popconfirm title="是否删除?" @confirm="delConfirm(item.id)">
                    <template #reference>
                        <el-button type="danger" size="small" :icon="Delete" circle />
                    </template>
                </el-popconfirm>

            </div>
        </div>

    </div>
    <div class="pagination">
        <el-pagination class="pagination-page" layout="prev, pager, next" :current-page="search.index"
            :page-size="search.size" :total="search.total" @size-change="paginChange" @current-change="paginChange" />
    </div>


    <el-dialog v-model="uploadDialog" title="修改作品" width="800">
        <el-form ref="ruleFormRef" :rules="rules" :model="data" label-width="auto"
            style="max-width: 700px;margin: auto;">
            <el-row>
                <el-col :span="10">
                    <el-form-item label="标题" prop="name">
                        <el-input v-model="data.name" />
                    </el-form-item></el-col>
                <el-col :span="2"></el-col>
                <el-col :span="12">
                    <el-form-item label="类别" prop="gategoryId">
                        <el-select v-model="data.categoryId" style="width: 80px;border: none;">
                            <el-option style="width: 100px;text-align: center;" v-for="category in categories"
                                :label="category.name" :value="category.id" />
                        </el-select>

                    </el-form-item>

                </el-col>
            </el-row>
            <el-form-item label="标签" prop="tag">
                <el-input v-model="data.tagTemp" @change="tagChange" />
                <el-scrollbar>
                    <div class="scrollbar-flex-content">
                        <el-tag v-for="(item, index) in tags" closable @close="tagClose(index)" type="success"
                            class="scrollbar-demo-item">{{ item
                            }}</el-tag>
                    </div>
                </el-scrollbar>

            </el-form-item>

            <el-form-item label="内容" prop="description">
                <el-input type="textarea" v-model="data.description" />
            </el-form-item>

            <el-form-item prop="fileId">
                <el-upload v-model:file-list="fileList" class="upload-demo" :action="api.upload"
                    :on-preview="handlePreview" :on-remove="handleRemove" :limit="10" :on-success="uploadSuccess"
                    list-type="picture">
                    <el-button type="primary">点击上传</el-button>
                    <template #tip>
                        <div class="el-upload__tip">
                            文件限制10个,文件大小不能超过10MB
                        </div>
                    </template>

                </el-upload>
            </el-form-item>
            <el-form-item>
                <el-button style="margin: 10px 0 0 90%;" type="primary" @click="submit(ruleFormRef)">修改</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>
<script setup>
import {
    Delete,
    Edit
} from '@element-plus/icons-vue'
import { useRoute, useRouter } from 'vue-router'
import { ref, watch, reactive } from 'vue'
import api from './api.js'
import '@/assets/iconfont.js'
const route = useRoute()
const router = useRouter()
const imageUrl = (images) => {
    const image = images.split(',')
    return image[0]
}
import { ElMessage } from 'element-plus'
const userId = ref(route.params.id)
const isMy = ref(userId.value == localStorage.getItem('userId') ? true : false)
const uploadDialog = ref(false)
const data = ref()
const datas = ref([])
const search = ref({
    index: 1,
    size: 8,
    name: '',
    userId: route.params.id,
    total: 0
})

watch(
    () => route.params.id,
    (newId, oldId) => {
        userId.value = newId;
        isMy.value = newId == localStorage.getItem('userId') ? true : false
        search.value.userId = newId
        selectByUserId()
    }
);

import rule from '../Home/rules'
const rules = reactive(rule.rules)
const ruleFormRef = ref()
const fileList = ref([])

const delConfirm = (id) => {
    api.delPhoto(id).then(res => {
        if (res.success) {
            ElMessage({ type: 'success', message: res.message })
            datas.value = datas.value.filter(x => x.id != id)
        }
    })
}

const editShow = (row) => {
    fileList.value = []
    data.value = JSON.parse(JSON.stringify(row))
    tags.value = row.tag.split(',')
    uploadDialog.value = true
    var t = row.fileId.split(',')
    t.forEach(item => {
        fileList.value.push({ url: api.show + item, data: item })
        console.log(api.show + item)
    });
}
const tags = ref([])
const categories = ref([])
const getCategory = () => {
    api.getCategory().then(x => {
        categories.value = x.datas
    })
}
const tagChange = () => {
    if (tags.value.length == 5) {
        return
    }

    tags.value.push(data.value.tagTemp)
    data.value.tagTemp = ''
    console.log(tags.value)
    if (tags.value.length > 0) {
        data.value.tag = '1'
    }
}
getCategory()
const handleRemove = (uploadFile, uploadFiles) => {
    data.value.fileId = ''
    uploadFiles.forEach((file, index) => {
        console.log(file)
        console.log(index)
        if (index == 0) {
            data.value.fileId = file.data
        } else {
            data.value.fileId += ',' + file.data
        }
    });
    console.log(data.value)
}
const uploadSuccess = (response) => {
    if (data.value.fileId == '') {
        data.value.fileId = response.data
    } else {
        data.value.fileId += ',' + response.data
    }
    console.log(data.value.fileId)
}

const submit = async (formEl) => {
    data.value.tag = ''
    tags.value.forEach((item, index) => {
        if (index == 0) {
            data.value.tag = item
        } else {
            data.value.tag += ',' + item
        }
    })
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            api.updatePhoto(data.value).then(res => {
                if (res.success) {
                    ElMessage({
                        type: 'success',
                        message: "修改成功!"
                    })
                    uploadDialog.value = false
                    datas.value[datas.value.findIndex(x => x.id == data.value.id)] = JSON.parse(JSON.stringify(data.value))
                } else {
                    ElMessage({
                        type: 'error',
                        message: res.message
                    })
                }
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}


const paginChange = (value) => {
    search.value.index = value
    selectByUserId()
}
const toPhoto = (id) => {
    router.push({ name: 'photo', params: { id: id } })
}

const selectByUserId = () => {
    api.selectByUserId(search.value).then(res => {
        if (res.success) {
            datas.value = res.datas
            search.value.total = res.total

            console.log(res.total)
        }
    })
}
selectByUserId()

console.log(1231231)
</script>

<style>
.pagination {
    width: 100%;
    background-color: white;
    height: 60px;
    border-radius: 10px;
    position: relative;
}

.pagination .pagination-page {
    position: absolute;
    top: 20px;
    left: 30px;
}

.user-container {
    width: 100%;
    height: 80%;
    padding: 15px;
    display: flex;
    justify-content: start;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.user-container .user-photo {
    margin: 10px 20px;
    height: 300px;
    width: 320px;
    background-color: #e1ecfc;
    position: relative;
}

.user-container .user-photo:hover {
    cursor: pointer;
}

.user-container .user-photo .photo-info {
    top: 210px;
    left: 10px;
    position: absolute;
    font-size: 13px;
    color: #333;
    width: 90%;
}

.user-container .user-photo .info-statistics {
    position: absolute;
    /* right: 0; */
    top: 225px;
    left: 10px;
    font-size: 12px;
    line-height: 23px;
    color: #666;
    display: flex;
    justify-content: space-between;
}

.user-container .user-photo .photo-time {
    position: absolute;
    height: 23px;
    font-size: 12px;
    line-height: 23px;
    top: 225px;
    color: #666;
    right: 30px;
}

.user-container .user-photo .photo-button {
    position: absolute;
    top: 260px;
    right: 20px
}
</style>